<template>
  <view class="container">
    <!-- <image src="/icon/bgImg.png" mode='aspectFit|aspectFill|widthFix' /> -->
    <view class="container-content">
      <view class="container-content_header" :style="{ 'padding-top': `${paddingTop}px` }">
        <view class="header-back" @click="$goPath(1)">
          <image src="/static/icon/back.png" mode="aspectFit|aspectFill|widthFix" />
        </view>
        <view class="search">
          <view style="width: 700rpx;" @click="$goPath(2, '/pages/premiumBag/goods/search?type=1')">
            <u-search placeholder="请输入你想搜索的内容" :showAction="false" bgColor="#fff"></u-search>
          </view>
        </view>
      </view>
    </view>
    <view class="container-footer">
      <view class="container-footer_title">
        <view>热卖专区</view>
      </view>
      <block v-for="(item, index) in shopList" :key="index">
        <view class="collection-item"
          @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}`)">
          <view class="collection-item-imgs">
            <image :src="item.thumbnail" mode="aspectFill" />
          </view>
          <view class="collection-item-body">
            <view class="collection-item__upper">
              <view class="collection-item__title">{{ item.name }}</view>
            </view>
            <view class="collection-item__down">
              <view>￥<text>{{ item.showPrice }}</text></view>
              <view class="collection-item__down_icon" @click="onCollect">
                <u-icon :name="item.collect == 1 ? 'heart-fill' : 'heart'" size="40rpx"
                  :color="item.collect == 1 ? '#EA5F5F' : '#BFBFBF'" />
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';

export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      paddingTop: 0,
      isCollect: false,
      shopList: [],
      page: {
        current: 1,
        size: 20
      }
    }
  },
  onShow() {
    let app = uni.getSystemInfoSync()
    this.paddingTop = app.statusBarHeight
    this.getfindByPage();
  },
  methods: {
    async getfindByPage() {
      const { userId, page } = this;
      const param = {
        page,
        query: {
          userId,
          isHot: 1,
        },
      };
      let result = await this.$request.miniFindByPage(param)
      const { records } = result.data;
      this.shopList = records
    },
    //收藏
    onCollect(item) {
      const { userId } = this;
      if (!userId) return this.$toast('您还未登录,请先去登录!')
      const param = {
        productUpId: item.id,
        userId
      }
      if (item.collect == 0 || item.collect == null) {
        this.$request.miniAddCollet(param).then(res => {
          if (res.code == 200) {
            this.getfindByPage()
            this.$toast('收藏成功!')
          }
        });
      } else {
        this.$request.miniCancelCollet(param).then(res => {
          if (res.code == 200) {
            this.getfindByPage()
            this.$toast('取消收藏成功!')
          }
        });
      }
    },
  },
}
</script>
<style scoped>
.container {
  height: 100%;
  background-color: #9dad76;
}

.container-content {
  width: 100%;
  height: 725rpx;
  background-image: url(https://youpindou.com:8080/miniProgram/image/showImg?imgUrl=/home/ypd_test/images/1f96c95c-8dcf-45d9-8907-77fe2ff549af.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.container-content_header {
  padding: 0 24rpx;
}

.header-back {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.header-back image {
  width: 100%;
  height: 100%;
  display: block;
}

.search .t-search__input-container {
  border-radius: 32rpx !important;
  height: 64rpx !important;
}

.search .t-search__input {
  font-size: 28rpx !important;
  color: #666666 !important;
  font-size: 30rpx !important;
  font-weight: bold;
}

.header-titles {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-title_1 {
  font-size: 48rpx;
  color: #333;
  font-weight: bold;
  line-height: 56rpx;
  text-align: center;
  margin-top: 40rpx;
}

.header-title_2 {
  width: 232rpx;
  line-height: 36rpx;
  text-align: center;
  background: #333333;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  font-size: 24rpx;
  color: #fff;
  margin: 20rpx 0 48rpx;
}

.header-title_logo {
  width: 220rpx;
  height: 60rpx;
}

.header-title_logo image {
  width: 100%;
  height: 100%;
  display: block;
}

.container-footer {
  flex: 1;
  background-color: #9dad76;
  padding: 28rpx 56rpx;
}

.container-footer_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-bottom: 24rpx;
}

.container-footer_title>view:first-child {
  width: 420rpx;
  line-height: 72rpx;
  background: linear-gradient(270deg, #9dad76 0%, #6a3318 22%, #6a3318 52%, #6a3318 80%, #9dad76 100%);
  text-align: center;
}

/* .container-footer_title>view:last-child {
  width: 420rpx;
  height: 4rpx;
  background: linear-gradient(270deg, rgba(123,224,163,0) 0%, #9FFFC5 22%, #A9FFCB 52%, #9FFFC5 80%, rgba(123,224,163,0) 100%);
} */

.collection-item {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.collection-item-imgs {
  flex-shrink: 0;
  width: 200rpx;
  height: 200rpx;
}

.collection-item-imgs:empty {
  display: none;
  margin: 0;
}

.collection-item-imgs image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16rpx 16rpx;
  overflow: hidden;
}

.collection-item-body {
  flex: 1;
  height: 200rpx;
  padding: 16rpx 24rpx 18rpx;
  display: flex;
  flex-direction: column;
}

.collection-item__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.collection-item__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  height: 72rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}

.collection-item__tags {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}

.collection-item__tag {
  color: #999999;
  background: transparent;
  font-size: 24rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  border-right: 1rpx solid #999999;
  padding: 0 4rpx;
  border-radius: 4rpx;
  line-height: 30rpx;
}

.collection-item__tag:last-child {
  border: 0;
}

.collection-item__down {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}


.collection-item__down>view:first-child {
  font-size: 40rpx;
  color: #EA5F5F;
}

.collection-item__down .collection-item__down_icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>